<template>
    <view class="head-nav" :style="'background:' + background">
        <view :class="'nav ' + (navIndexClone == index ? 'activite' : '')" @click="checkIndex" :data-index="index" v-for="(item, index) in tabMenu" :key="index">
            <!-- <image wx:if="{{navIndex==index}}" class="img1" src="../..https://oos-cn.ctyunapi.cn/front-end/static/title_bg1.png"></image> -->

            <text v-if="item.name">
                {{ item.name }}
                <text v-if="item.value">({{ item.value }})</text>
            </text>

            <text v-else>{{ item }}</text>

            <image v-if="navIndexClone == index" class="img2" src="https://oos-cn.ctyunapi.cn/front-end/static/static/title_bg2.png"></image>
        </view>
    </view>
</template>

<script lang="ts">
// 'use strict'; // components/tabbar.ts

export default {
    data() {
        return {
            navIndexClone: ''
        };
    },
    /**
     * 组件的属性列表
     */
    props: {
        currentPage: {
            type: Number,
            default: 0
        },
        navIndex: {
            type: Number,
            default: 0
        },
        tabMenu: {
            type: Array,
            default: []
        },
        background: {
            type: String,
            default: ''
        }
    },
    created: function () {},
    /**
     * 组件的方法列表
     */
    methods: {
        //tab栏
        checkIndex: function (e) {
            var index = e.currentTarget.dataset.index;
            this.$emit('checkIndex', {
                detail: index
            });
            this.navIndexClone=index
			console.log("打印", this.navIndexClone,index)
        }
    },
    watch: {
        navIndex: {
            handler: function (newVal, oldVal) {
                this.navIndexClone = newVal;
            },

            immediate: true
        }
    }
};
</script>
<style lang="less">

@import "../../commin/commin.less";
page{
    background-color: #F5F7FA;
}
.head-nav {
	.kuangao(750rpx,90rpx);
    background: #FFFFFF;
	margin: 0rpx 32rpx 0rpx 8rpx;
	display: flex;
	align-items: center;
    .fontsize(32rpx);
	font-family: PingFang SC;
	font-weight: 500;
    color: @text-color3;
    display: flex;
    justify-content: space-around;

	.activite {
		.fontsize(30rpx);
		font-family: PingFang SC;
		font-weight: bold;
		color: @blue;
	}

	.img1 {
		.kuangao(30rpx, 30rpx);
		position: absolute;
        margin-left: 50rpx;
        flex: 1;
	}

	.img2 {
		.kuangao(72rpx, 6rpx);
		position: absolute;
		margin-top: 46rpx;
        margin-left: -68rpx;
        flex: 1;
	}

	.nav {
		padding-bottom: 10rpx;
		margin: 0 24rpx;
	}
}
</style>
